<template>
  <div class="container">
    <div class="operation-bar">
      <router-link to="/main/renshi/jixiao/jixiaojilu">
        <el-button type="primary">返回</el-button>
      </router-link>
      <router-link to="/main/renshi/jixiao/jixiaojilu">
        <el-button type="primary">新增</el-button>
      </router-link>
    </div>
    <h2>绩效面谈记录列表</h2>

    <!-- 添加搜索框 -->
    <div class="search-bar">
      <el-input v-model="searchForm.appraiser" placeholder="考核者" style="width: 180px; margin-right: 10px;" />
      <el-input v-model="searchForm.employeeId" placeholder="工号" style="width: 180px; margin-right: 10px;" />
      <el-input v-model="searchForm.department" placeholder="任职部门" style="width: 180px; margin-right: 10px;" />
      <el-select v-model="searchForm.interviewType" placeholder="面谈类别" clearable style="width: 180px; margin-right: 10px;">
        <el-option label="本月计划" value="monthlyPlan" />
        <el-option label="上月考核" value="lastMonthReview" />
        <el-option label="本月计划/上月考核" value="bothType" />
      </el-select>
      <el-date-picker
        v-model="searchForm.interviewTimeRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 300px; margin-right: 10px;"
        value-format="yyyy-MM-dd"
      />
      <div>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="appraiser" label="考核者" width="100" />
      <el-table-column prop="employeeId" label="工号" width="100" />
      <el-table-column prop="position" label="职务" width="100" />
      <el-table-column prop="department" label="任职部门" width="120" />
      <el-table-column prop="superior" label="上级主管" width="100" />
      <el-table-column prop="interviewTime" label="面谈时间" width="150">
        <template v-slot="scope">
          {{ formatDateTime(scope.row.interviewTime) }}
        </template>
      </el-table-column>
      <el-table-column label="面谈类别" width="150">
        <template v-slot="scope">
          <span v-if="scope.row.monthlyPlan">本月计划</span>
          <span v-if="scope.row.lastMonthReview">上月考核</span>
          <span v-if="scope.row.bothType">本月计划/上月考核</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150">
        <template v-slot="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="calc(100% - 150)">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)" style="color: #F56C6C;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { getPerformanceInterviewList, deletePerformanceInterview } from '@/api/performanceInterview'

export default {
  data() {
    return {
      searchForm: {
        appraiser: '',
        employeeId: '',
        department: '',
        interviewType: '',
        interviewTimeRange: []
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          appraiser: this.searchForm.appraiser,
          employeeId: this.searchForm.employeeId,
          department: this.searchForm.department,
          interviewType: this.searchForm.interviewType
        }
        
        if (this.searchForm.interviewTimeRange && this.searchForm.interviewTimeRange.length === 2) {
          params.startTime = this.searchForm.interviewTimeRange[0]
          params.endTime = this.searchForm.interviewTimeRange[1]
        }

        const response = await getPerformanceInterviewList(params)
        this.tableData = response.data.records
        this.total = response.data.total
      } catch (error) {
        this.$message.error('获取列表失败：' + error.message)
      }
    },
    formatDateTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleView(row) {
      this.$router.push(`/main/renshi/jixiao/jixiaojilu?id=${row.id}&mode=view`)
    },
    handleEdit(row) {
      this.$router.push(`/main/renshi/jixiao/jixiaojilu?id=${row.id}&mode=edit`)
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await deletePerformanceInterview(row.id)
        this.$message.success('删除成功')
        this.fetchData()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败：' + error.message)
        }
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    resetSearch() {
      this.searchForm = {
        appraiser: '',
        employeeId: '',
        department: '',
        interviewType: '',
        interviewTimeRange: []
      }
      this.handleSearch()
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px; /* 限制整体宽度 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
  min-height: calc(100vh - 40px);
}

.operation-bar {
  /* margin-bottom: 20px; */
  display: flex;
  position: relative;
  font-family: '宋体';
  font-size: 1em;
}
button.el-button{
  font-size: 1em;
  font-family: '宋体';
  padding: 8px 12px;
  margin-left: 10px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.search-bar {
  margin: 20px 0;
  display: flex;
  white-space: nowrap;
}

.search-bar .el-input,
.search-bar .el-select,
.search-bar .el-date-picker {
  margin-bottom: 10px;
}
</style>